<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- v-model每次进行数据更新时输入框和数据进行了同步的更新
        如果不需要同步更新时再v-model.lazy 失去焦点后数据进行更新
        底层原理；默认收集数据是oninput事件当input框中的值发生变化立即触发，当.lazy后，将事件改为onchange事件  当失去焦点时触发
        oninput
        onchange 
        
        -->
        <input type="text" v-model.lazy="name">
        <p>{{name}}</p>
        <select name="" id="" v-model="select">
            <option value="" disabled>请选择</option>
            <option value="迪丽热巴">迪丽热巴</option>
            <option value="白鹿">白鹿</option>
            <option :value="name">{{name}}</option>
        </select>
        <p>{{select}}</p>
        <!-- .number 将其中的值转换为number类型 但是注意：当第一个字符为字符串时就不会转变 -->
        <input type="text" v-model.number="num">
        <p>{{num}}</p>
        <!-- .trim 去除首尾空格-->
        <input type="text" v-model.trim="test">
        <p>吱吱吱吱{{test}}吱吱吱</p>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                name:'郭德纲',
                select:'',
                num:0,
                test:''
            }
        })
    </script>
</body>
</html>